<template xmlns:v-lazy="http://www.w3.org/1999/xhtml">
  <div class="tool-photo-add">
    <w-nav-bar
      title="添加照片"/>
    <input
      class="w-input-hid"
      type="file"
      multiple
      @change="fileChange"
      accept="image/*"
      ref="FILE_INPUT">
    <div class="w-btn-fixed-b w-max-btn">
      <x-button
        type="primary"
        @click.native="addBtnClick">
        {{ fileArr.length > 0 ? '上传照片' : '添加照片' }}
      </x-button>
    </div>
    <ul
      class="table-view w-flex-between">
      <li
        v-for="(v, k) in selImageArr"
        :key="k"
        class="image-box w-image-fit"
        @click.self="imageClick(v)"
        :style="bgImage(v)">
        <icon-remove
          class="remove-icon"
          width="30"
          height="30"
          @click.native="removeClick(k)"/>
      </li>
    </ul>
    <w-viewer ref="WViewer"/>
  </div>
</template>

<script>
  import { LocalImage } from 'yb-tool'
  import OSS from '@/api/OSS'
  import Config from '@/config/index'
  import IconRemove from '@/icons/remove.svg'
  import WViewer from '@/components/global/viewer/index'
  import { XButton } from 'vux'
  export default {
    name: 'ToolPhotoAdd',
    components: {
      IconRemove,
      WViewer,
      XButton
    },
    inject: ['bgImage'],
    data() {
      return {
        // 文件数组
        fileArr: [],
        // 选择的图片数组
        selImageArr: []
      }
    },
    methods: {
      // 添加按钮点击
      addBtnClick() {
        if (this.fileArr.length) {
          this.upImage()
        } else {
          this.$refs['FILE_INPUT'].dispatchEvent(new MouseEvent('click'))
        }
      },
      // 文件改变的时候
      fileChange(e) {
        const [...files] = e.target.files
        this.fileArr = files
        const loadFileArr = files.map((file) => {
          return LocalImage(file)
        })
        Promise.all(loadFileArr).w_then((dataArr) => {
          this.selImageArr = dataArr
        })
      },
      // 上传数据
      upImage() {
        this.$w_popview.showLoading('上传中...')
        const ups = this.fileArr.map((file) => {
          return OSS.aLiFileUp(file, Config.photoCDNPerfix, '', 'image')
        })
        Promise.all(ups).then(() => {
          this.$w_popview.msgSuccess('上传完成')
          this.$refs['FILE_INPUT'].value = null
          // 文件数组
          this.fileArr = []
          this.selImageArr = []
        }).catch(() => {
          this.$w_popview.msgError('上传失败')
        }).finally(() => {
          this.$w_popview.hideLoading()
        })
      },
      // 图片点击
      imageClick(data) {
        this.$refs['WViewer'].show([data])
      },
      // 删除按钮点击
      removeClick(k) {
        this.fileArr.splice(k, 1)
        this.selImageArr.splice(k, 1)
      }
    }
  }
</script>

<style lang="scss" scoped>
.tool-photo-add {
  >.table-view {
    list-style: none;
    margin: 0;
    padding: 10px 10px 100px 10px;
    flex-wrap: wrap;
    >.image-box {
      width: 175px;
      height: 175px;
      margin-bottom: 10px;
      position: relative;
      z-index: 0;
      >.remove-icon {
        position: absolute;
        right: 0px;
        top: 0px;
      }
    }
  }
}
</style>
